<template>
  <div>
      <div class="talk">
          <div class="talk-header">
              <span></span>
              <p>社群话题</p>
              <span></span>
          </div>
          <div class="talk-content" v-for="(v,i) in arrtalk" :key="i">
              <div class="active">
                <img src="/image/Life/huati.png" alt="">
                <span>{{v.title}}</span>
              </div>
              <img src="/image/Life/mealtalk.png" alt="">
              <div class="talk-num">
                  <ul>
                    <li v-for="(v,i) in v.head" :key="i"> <img :src="v.img" alt=""></li>
                  </ul>
                  <p>已有<span>{{v.num}}</span>人参与讨论</p>
                  <div class="sign-up">
                  参与发帖
                  </div>
              </div>

              <div class="talk-carousel">
                  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(v,i) in v.content" :key="i">
                        <div class="carousel-title">
                            <img :src="v.img" alt="">
                            <span>{{v.name}}</span>
                        </div>
                        <p>{{v.con}}</p>
                    </van-swipe-item>
                  </van-swipe>
              </div>
          </div>
      </div>


      
  </div>
</template>

<script>
export default {
    props:["arrtalk"],
}
</script>

<style scoped>
    .talk{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .talk-header{
        width: 1.9rem;
        height: .7rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .talk-header span{
        width: .46rem;
        height: .08rem;
        display: inline-block;
        border: 0.015rem solid #e0f1fe;
        border-left: none;
        border-right: none;
    }
    .talk-header p{
        font-size: .14rem;
        color: white;
    }
    .talk-content{
        width: 3.88rem;
        height: 3.65rem;
        border-radius: .08rem;
        background-color: white;
        padding: .11rem;
        margin-bottom: 1rem;
    }
    .active{
        margin-top: .1rem;
        height: .2rem;
        display: flex;
        align-items: center;
    }
    .active>img{
        width: .2rem;
    }
    .active>span{
        font-size: .16rem;
        margin-left: .05rem;
    }
    .talk-content>img{
        width: 100%;
        height: 1.55rem;
        margin-top: .1rem;
    }
    .talk-num{
        position: relative;
        display: flex;
        align-items: center;
        margin-top: .15rem;
    }
    .talk-num ul{
        display: flex;
    }
    .talk-num li{
        width: .23rem;
        height: .23rem;
        border-radius: 50%;
        margin-right: -.1rem;
        overflow: hidden;
    }
    .talk-num li img{
        width: 100%;
        height: 100%;
    }
    .talk-num p{
        margin-left: .2rem;
    }
    .sign-up{
        width: .9rem;
        height: .35rem;
        line-height: .35rem;
        text-align: center;
        background-color: #19b0ff;
        position: absolute;
        right: 0rem;
        font-size: .14rem;
        color: white;
        border-radius: .15rem;
    }
     .my-swipe .van-swipe-item {
        font-size: .14rem;
        text-align: left;
        margin-top: .06rem;
    }
  .talk-carousel span,.talk-carousel p{
      color: #c6c6c6;
  }
  .talk-carousel span{
      margin-left: .02rem;
  }
  .talk-carousel p{
      line-height: .22rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
  }
  .talk-carousel img{
      width: .27rem;
      height: .27rem;
      border-radius: .5rem;
  }
  .carousel-title{
      display: flex;
      align-items: center;
      margin-bottom: .09rem;
  }
</style>